<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <ask-breadcrumb-item
                    >村组概览{{
                        $route.query.name ? "(" + $route.query.name + ")" : ""
                    }}</ask-breadcrumb-item
                >
            </ask-breadcrumb>
        </template>
        <div class="title">村基础情况</div>
        <div class="base-case">
            <div class="base-case-left">
                <ul class="info">
                    <li>
                        <img src="~@/assets/icon/cunT.png" alt="" />
                        <div>
                            <span :title="dataList.groupCount || 0">{{
                                dataList.groupCount || 0
                            }}</span>
                            <p>队(组)数</p>
                        </div>
                    </li>
                    <li>
                        <img src="~@/assets/icon/houseT.png" alt="" />
                        <div>
                            <span :title="dataList.houseCount || 0">{{
                                dataList.houseCount || 0
                            }}</span>
                            <p>户数</p>
                        </div>
                    </li>
                    <li>
                        <img src="~@/assets/icon/renkouT.png" alt="" />
                        <div>
                            <span :title="dataList.population || 0">{{
                                dataList.population || 0
                            }}</span>
                            <p>人口数</p>
                        </div>
                    </li>
                    <li>
                        <img src="~@/assets/icon/qiyeT.png" alt="" />
                        <div>
                            <span :title="dataList.enterpriseCount || 0">{{
                                dataList.enterpriseCount || 0
                            }}</span>
                            <p>经营主体数</p>
                        </div>
                    </li>
                </ul>
                <div class="title" style="margin-top: 10px">村土地情况</div>
                <ul class="info">
                    <li>
                        <img src="~@/assets/icon/zongmianjiT.png" alt="" />
                        <div>
                            <span :title="dataList.totalArea || 0">{{
                                dataList.totalArea || 0
                            }}</span>
                            <p>幅员面积<br>(平方公里)</p>
                        </div>
                    </li>
                    <li>
                        <img src="~@/assets/icon/jiansheyongdiT.png" alt="" />
                        <div>
                            <span :title="dataList.buildArea || 0">{{
                                dataList.buildArea || 0
                            }}</span>
                            <p>建设用地(亩)</p>
                        </div>
                    </li>
                    <li>
                        <img src="~@/assets/icon/lindiT.png" alt="" />
                        <div>
                            <span :title="dataList.agriculturalArea || 0">{{
                                dataList.agriculturalArea || 0
                            }}</span>
                            <p>耕地(亩)</p>
                        </div>
                    </li>
                    <li class="last">
                        <span>是否允许土地流转</span>
                        <p v-if="dataList.landConversion">
                            {{
                                dataList.landConversion === 1
                                    ? "整村允许"
                                    : dataList.landConversion === 2
                                    ? "部分允许"
                                    : dataList.landConversion === 3
                                    ? "不允许"
                                    : ""
                            }}
                        </p>
                    </li>
                </ul>
            </div>
            <div class="base-case-right">
                <div class="base-info-box">
                    <div :class="dataList.waterCondition ? 'active' : ''">
                        <img
                            v-if="dataList.waterCondition"
                            src="~@/assets/icon/shuiT01.png"
                            alt=""
                        />
                        <img v-else src="~@/assets/icon/shuiBT01.png" alt="" />
                        <div>
                            <span>通水</span>
                            <i
                                :class="
                                    dataList.waterCondition
                                        ? 'el-icon-success'
                                        : 'el-icon-error'
                                "
                            ></i>
                        </div>
                    </div>
                    <div :class="dataList.electricCondition ? 'active' : ''">
                        <img
                            v-if="dataList.electricCondition"
                            src="~@/assets/icon/dianT01.png"
                            alt=""
                        />
                        <img v-else src="~@/assets/icon/dianBT01.png" alt="" />
                        <div>
                            <span>通电</span>
                            <i
                                :class="
                                    dataList.electricCondition
                                        ? 'el-icon-success'
                                        : 'el-icon-error'
                                "
                            ></i>
                        </div>
                    </div>
                    <div :class="dataList.gasCondition ? 'active' : ''">
                        <img
                            v-if="dataList.gasCondition"
                            src="~@/assets/icon/qiT01.png"
                            alt=""
                        />
                        <img v-else src="~@/assets/icon/qiBT01.png" alt="" />
                        <div>
                            <span>通气</span>
                            <i
                                :class="
                                    dataList.gasCondition
                                        ? 'el-icon-success'
                                        : 'el-icon-error'
                                "
                            ></i>
                        </div>
                    </div>
                    <div :class="dataList.netCondition ? 'active' : ''">
                        <img
                            v-if="dataList.netCondition"
                            src="~@/assets/icon/wangT01.png"
                            alt=""
                        />
                        <img v-else src="~@/assets/icon/wangBT01.png" alt="" />
                        <div>
                            <span>通网</span>
                            <i
                                :class="
                                    dataList.netCondition
                                        ? 'el-icon-success'
                                        : 'el-icon-error'
                                "
                            ></i>
                        </div>
                    </div>
                    <div class="last">
                        <span>道路硬化</span>
                        <p v-if="dataList.roadHardeningCover">
                            {{
                                dataList.roadHardeningCover === 1
                                    ? "村村通"
                                    : dataList.roadHardeningCover === 2
                                    ? "组组通"
                                    : dataList.roadHardeningCover === 3
                                    ? "户户通"
                                    : ""
                            }}
                        </p>
                    </div>
                </div>
                <ul class="land-info">
                    <li>
                        <span>耕地可流转面积：</span>
                        <p>{{ dataList.conversionArea }}亩</p>
                    </li>
                    <li>
                        <span>已流转耕地面积：</span>
                        <p>{{ dataList.transferredCultivatedLand }}亩</p>
                    </li>
                    <li>
                        <span>流转价格：</span>
                        <p>{{ dataList.conversionPrice }}元/亩</p>
                    </li>
                    <li>
                        <span>剩余建设用地面积：</span>
                        <p>{{ dataList.surplusConstructionLandArea }}亩</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="title">村队组情况</div>
        <div class="group-box">
            <div
                class="group-item"
                v-for="(item, index) in teamList"
                :key="index"
            >
                <div class="g-i-left">
                    <div class="ring" :title="item.name">
                        <span>{{ item.name }}</span>
                    </div>
                </div>
                <div class="g-i-right">
                    <div class="g-i-r-top">
                        <p class="black" :title="item.leader">
                            {{ item.leader }}
                        </p>
                        <p class="sub gray" :title="item.telephone">
                            {{ item.telephone }}
                        </p>
                    </div>
                    <div class="g-i-r-bottom">
                        <div>
                            <p class="black">{{ item.houseCount }}</p>
                            <p class="gray">户数</p>
                        </div>
                        <div>
                            <span class="black">{{ item.population }}</span>
                            <p class="gray">人数</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="title">村简介</div>
        <div class="village-des" v-if="dataList.introduction" v-html="dataList.introduction"></div>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
    name: "VillageTeamInfoNotAlive"
})
export default class VillageTeamInfo extends Vue {
    dataList = {
        advertisingMap: "",
        agriculturalArea: "",
        buildArea: "",
        constructionLandCondition: "",
        constructionLandUseCondition: "",
        conversionArea: "",
        conversionPrice: "",
        countryCount: "",
        electricCondition: "",
        enterpriseCount: "",
        feature: "",
        gasCondition: "",
        groupCount: "",
        houseCount: "",
        introduction: "",
        netCondition: "",
        number: "",
        population: "",
        totalArea: "",
        trafficCondition: ""
    };

    teamList: any = [];

    setInterval: any = null;

    created() {
        if (this.$route.query.id) {
            this.getQueryInfo();
            this.getQueryData();
        } else {
            this.getInfo();
            this.getData();
        }
    }

    mounted() {
        this.setScroll();
    }

    _mouseover() {
        clearInterval(this.setInterval);
        this.setInterval = null;
    }

    _mouseout() {
        this.setScroll();
    }

    setScroll() {
        if (this.setInterval) return;
        this.setInterval = setInterval(() => {
            const el: any = this.$refs.SwiperImgBox;
            if (!el) return;
            if (el.scrollWidth > el.clientWidth) {
                if (el.clientWidth + el.scrollLeft === el.scrollWidth) {
                    el.scroll(0, 0);
                } else {
                    el.scroll(el.scrollLeft + 1, 0);
                }
            }
        }, 10);
    }

    // 查询镇村的信息
    async getInfo() {
        const res = await this.$server["townAndvillage/query"]({ data: {} });
        if (res.data.code === 200) {
            this.dataList = res.data.data;
        }
    }

    // 查询镇村的信息
    async getData() {
        const res = await this.$server["group/queryList"]({
            data: {}
        });
        if (res.data.code === 200) {
            this.teamList = res.data.data;
        }
    }

    // 根据id查询
    async getQueryInfo() {
        const res = await this.$server["village/details"]({
            params: {
                id: this.$route.query.id
            }
        });
        if (res.data.code === 200) {
            this.dataList = res.data.data;
        }
    }

    // 根据id查询
    async getQueryData() {
        const res = await this.$server["group/queryList"]({
            data: {
                villageCode: this.$route.query.villageCode
            }
        });
        if (res.data.code === 200) {
            this.teamList = res.data.data;
        }
    }

    beforeDestroy() {
        clearInterval(this.setInterval);
        this.setInterval = null;
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        height: calc(100% - 50px) !important;
        background: transparent !important;
    }
}

.base-case {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    &-left {
        width: 60%;
    }
    &-right {
        width: 40%;
        .land-info {
            background: #fff;
            height: 80px;
            padding: 0 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 40px;
            li {
                width: 40%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                font-weight: 500;
                span {
                    color: #9da1a4;
                }
                p {
                    margin: 0;
                    padding: 0;
                    color: #37383a;
                }
            }
        }
    }
}

.info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: #fff;
    li {
        width: 25%;
        padding: 0 40px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        * {
            margin: 0;
            padding: 0;
        }
        img {
            width: 28px;
            height: 24px;
        }
        div {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 126px;
            span {
                font-size: 24px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #37383a;
                display: inline-block;
                max-width: 126px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                cursor: default;
                line-height: 33px;
            }
            p {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #6b6c70;
                line-height: 20px;
            }
        }
        &.last {
            flex-direction: column;
            justify-content: center;
            span {
                font-size: 14px;
                color: #6B6C70;
            }
            p {
                font-size: 18px;
                color: rgba(55, 56, 58, 1);
                margin-top: 6px;
            }
        }
    }
}

.base-info-box {
    width: 100%;
    height: 80px;
    padding: 0 10px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    & > div {
        width: calc((100% - 96px) / 5);
        height: 50px;
        background: rgba(222, 39, 40, 0.1);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: #37383a;
        &.last {
            background: #fff;
            flex-direction: column;
            span {
                font-size: 14px;
                color: #6b6c70;
            }
            p {
                padding: 0;
                margin: 0;
                color: #37383a;
                font-size: 18px;
            }
        }
        img {
            width: 28px;
            height: 30px;
            margin-right: 10px;
        }
        i {
            margin-left: 5px;
        }
        .el-icon-error {
            color: #de2728;
            margin-left: 5px;
        }
        .el-icon-success {
            color: #32a78f;
            margin-left: 5px;
        }
        &.active {
            background: rgba(50, 167, 143, 0.1);
        }
    }
}

.title {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #37383a;
    margin-bottom: 10px;
}

.group-box {
    display: flex;
    flex-wrap: wrap;
    .group-item {
        // min-width: 210px;
        width: calc(92% / 5);
        height: 100px;
        background: #ffffff;
        opacity: 1;
        border-radius: 4px;
        display: flex;
        align-items: center;
        padding: 0 8px 0 9px;
        margin-right: 2%;
        margin-bottom: 10px;
        min-width: 0;
        &:nth-child(5n) {
            margin-right: 0;
        }
    }
    .g-i-left {
        width: 81px;
    }
    .g-i-right {
        flex: 1;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        overflow: hidden;
        p {
            margin: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .sub {
            font-size: 12px;
            line-height: 17px;
        }
        .black {
            color: #37383a;
            cursor: default;
        }
        .gray {
            color: #9da1a4;
            cursor: default;
        }
        .g-i-r-top {
            text-align: center;
        }
        .g-i-r-bottom {
            margin-top: 5px;
            display: flex;
            & > div {
                width: 50%;
                text-align: center;
            }
        }
    }
    .ring {
        width: 64px;
        height: 64px;
        border: 4px solid rgba(50, 167, 143, 0.09803921568627452);
        border-radius: 50%;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: #32a78f;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
            display: inline-block;
            width: 64px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
        }
    }
}

.village-des {
    background-color: #fff;
    width: 100%;
    padding: 4px 10px;
}
</style>
